<template>
  <view class="profile-container">

    <!-- 个人资料卡片 -->
    <view class="profile-card">
      <view class="card-content">
        <!-- 头像部分 -->
        <view class="avatar-section" @click="chooseAvatar">
          <image class="avatar" :src="fullAvatarUrl" mode="aspectFill"></image>
          <view class="avatar-edit-icon">
            <uni-icons type="camera-filled" size="20" color="#FFFFFF"></uni-icons>
          </view>
        </view>
        
        <!-- 个人基础信息 -->
        <view class="info-section">
          <text class="username">{{profileData.username || '未设置昵称'}}</text>
          <text class="phone">{{profileData.phone || '未绑定手机'}}</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单区 -->
    <view class="menu-list">
      <!-- 基础信息 -->
      <view class="menu-item" @click="goToEditProfile">
        <view class="menu-icon">
          <uni-icons type="person" size="24" color="#007AFF"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-title">基本资料</text>
        </view>
        <view class="menu-arrow">
          <uni-icons type="right" size="18" color="#BBBBBB"></uni-icons>
        </view>
      </view>
      
      <!-- 企业员工信息 -->
      <view class="menu-item" @click="goToEmployeeProfile">
        <view class="menu-icon">
          <uni-icons type="staff" size="24" color="#007AFF"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-title">企业员工信息</text>
        </view>
        <view class="menu-arrow">
          <uni-icons type="right" size="18" color="#BBBBBB"></uni-icons>
        </view>
      </view>
      
      <!-- 安全设置 -->
      <view class="menu-item" @click="goToSecuritySettings">
        <view class="menu-icon">
          <uni-icons type="locked" size="24" color="#007AFF"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-title">安全设置</text>
        </view>
        <view class="menu-arrow">
          <uni-icons type="right" size="18" color="#BBBBBB"></uni-icons>
        </view>
      </view>
    </view>
    
    <button class="submit-btn" @click="updateProfile">保存修改</button>
  </view>
</template>

<script>
import { getUserProfile, updateUserProfile } from '@/api/auth.js'

export default {
  data() {
    return {
      profileData: {
        username: '',
        name: '',
        phone: '',
        email: '',
        gender: '',
        department: '',
        position: '',
        address: '',
        profile_type: '',
        avatar_url: '',
      },
      baseUrl: 'http://127.0.0.1:8000',  // 服务器基础URL
      tempFilePath: '', // 临时文件路径
      genders: ['男', '女'],
      genderIndex: 0,
      loading: false
    }
  },
  computed: {
    fullAvatarUrl() {
      const avatar = this.profileData?.avatar_url
      
      // 如果没有头像，返回默认头像
      if (!avatar) {
        return '/static/images/avatar-default.png'
      }
      
      // 如果是预设头像（以/assets/开头），直接返回
      if (avatar.startsWith('/assets/')) {
        return avatar
      }
      
      // 如果是服务器上的媒体文件（以media/开头）
      if (avatar.startsWith('media/')) {
        return this.baseUrl + '/' + avatar
      }
      
      // 如果已经是完整URL（包含http或https）
      if (avatar.startsWith('http://') || avatar.startsWith('https://')) {
        return avatar
      }
      
      // 如果是从服务器返回的相对路径
      if (avatar.includes('media/avatars/')) {
        return this.baseUrl + '/' + avatar
      }
      
      // 如果是本地临时文件路径（微信小程序格式）
      if (avatar.startsWith('wxfile://') || avatar.startsWith('http://tmp/') || 
          avatar.startsWith('file://') || avatar.startsWith('/storage/')) {
        return avatar
      }
      
      // 默认情况，拼接baseUrl
      return this.baseUrl + avatar
    }
  },
  onLoad() {
    this.getProfile()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 获取用户配置信息
    async getProfile() {
      try {
        uni.showLoading({
          title: '加载中...'
        })
        
        const res = await getUserProfile()
        if (res.code === 200 && res.data) {
          const data = res.data
          this.profileData = {
            username: data.username || '',
            name: data.name || '',
            phone: data.phone || '',
            email: data.email || '',
            gender: data.gender || '',
            department: data.department || '',
            position: data.position || '',
            address: data.address || '',
            profile_type: data.profile_type || '',
            avatar_url: data.avatar_url || ''
          }
          
          // 设置性别选择器索引
          this.genderIndex = this.profileData.gender === 'M' ? 0 : 1
        } else {
          uni.showToast({
            title: '获取个人资料失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取个人资料出错:', error)
        uni.showToast({
          title: '获取个人资料失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 前往编辑基本资料页面
    goToEditProfile() {
      uni.navigateTo({
        url: '/pages/user/edit-profile'
      })
    },
    
    // 前往企业员工信息页面
    goToEmployeeProfile() {
      uni.navigateTo({
        url: '/pages/user/employee-profile'
      })
    },
    
    // 前往安全设置页面
    goToSecuritySettings() {
      uni.navigateTo({
        url: '/pages/user/security'
      })
    },
    
    // 选择头像图片
    chooseAvatar() {
      uni.chooseImage({
        count: 1, // 只能选一张图片
        sizeType: ['compressed'], // 压缩图片
        sourceType: ['album', 'camera'], // 可以从相册或相机选择
        success: (res) => {
          this.tempFilePath = res.tempFilePaths[0]
          
          // 上传头像到服务器
          this.uploadAvatarToServer(this.tempFilePath)
        },
        fail: (err) => {
          console.error('选择图片失败:', err)
        }
      })
    },
    
    // 上传头像到服务器
    uploadAvatarToServer(filePath) {
      // 显示上传中的提示
      uni.showLoading({
        title: '上传中...'
      })
      
      // 获取BASE_URL
      const BASE_URL = this.baseUrl // 使用data中的baseUrl
      
      // 使用uni.uploadFile上传文件到后端
      uni.uploadFile({
        url: BASE_URL + '/api/users/avatar/update/',
        filePath: filePath,
        name: 'avatar',
        header: {
          'Authorization': uni.getStorageSync('token') ? `Bearer ${uni.getStorageSync('token')}` : ''
        },
        success: (uploadRes) => {
          console.log('上传头像响应:', uploadRes)
          
          // 检查响应状态码
          if (uploadRes.statusCode !== 200) {
            uni.showToast({
              title: `服务器返回错误: ${uploadRes.statusCode}`,
              icon: 'none'
            })
            return
          }
          
          let result
          // 解析JSON响应
          try {
            result = JSON.parse(uploadRes.data)
            console.log('解析后的响应数据:', result)
          } catch (e) {
            console.error('解析响应失败:', e, '原始响应:', uploadRes.data)
            uni.showToast({
              title: '响应格式错误',
              icon: 'none'
            })
            return
          }
          
          // 处理成功响应
          if (result.code === 200 && result.avatar_url) {
            // 更新本地头像URL
            this.profileData.avatar_url = result.avatar_url
            
            uni.showToast({
              title: '头像上传成功',
              icon: 'success'
            })
            
            // 更新本地缓存的用户头像
            const userInfo = uni.getStorageSync('userInfo')
            if (userInfo) {
              console.log('更新前的用户信息:', userInfo)
              userInfo.avatarUrl = result.avatar_url
              uni.setStorageSync('userInfo', userInfo)
              console.log('更新后的用户信息:', userInfo)
              
              // 通知其他页面更新头像
              uni.$emit('userAvatarUpdated', result.avatar_url)
            }
          } else {
            uni.showToast({
              title: result.message || '头像上传失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          console.error('上传头像失败:', err)
          uni.showToast({
            title: '头像上传失败: ' + (err.errMsg || JSON.stringify(err)),
            icon: 'none'
          })
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },
    
    // 性别选择器变化
    bindGenderChange(e) {
      this.genderIndex = e.detail.value
      this.profileData.gender = this.genderIndex === 0 ? 'M' : 'F'
    },
    
    // 更新个人资料
    async updateProfile() {
      // 表单验证
      if (!this.profileData.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        })
        return
      }
      
      if (this.profileData.phone && !/^1\d{10}$/.test(this.profileData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      if (this.profileData.email && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.profileData.email)) {
        uni.showToast({
          title: '请输入正确的电子邮箱',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '保存中...'
        })
        
        const res = await updateUserProfile(this.profileData)
        console.log('更新个人资料响应:', res)
        
        // 检查响应结构，适配不同的响应格式
        if (res && (res.message === '个人资料更新成功' || res.code === 200 || (res.data && res.data.user_id))) {
          uni.showToast({
            title: '个人资料更新成功',
            icon: 'success'
          })
          
          // 更新本地存储的用户信息
          const userInfo = uni.getStorageSync('userInfo')
          if (userInfo) {
            userInfo.userName = this.profileData.username
            userInfo.phone = this.profileData.phone
            if (this.profileData.avatar_url) {
              userInfo.avatarUrl = this.profileData.avatar_url
            }
            uni.setStorageSync('userInfo', userInfo)
          }
          
          // 返回上一页
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: res.error || res.message || '更新个人资料失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('更新个人资料出错:', error)
        uni.showToast({
          title: error.detail || error.message || '更新个人资料失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}

.profile-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .card-content {
    display: flex;
    align-items: center;
  }
  
  .avatar-section {
    position: relative;
    margin-right: 30rpx;
    
    .avatar {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      background-color: #f0f0f0;
    }
    
    .avatar-edit-icon {
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 122, 255, 0.8);
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .info-section {
    flex: 1;
    
    .username {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .phone {
      font-size: 28rpx;
      color: #999;
    }
  }
}

.menu-list {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    position: relative;
    
    &:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 0;
      height: 1rpx;
      background-color: #f0f0f0;
    }
    
    .menu-icon {
      margin-right: 20rpx;
    }
    
    .menu-content {
      flex: 1;
      
      .menu-title {
        font-size: 30rpx;
        color: #333;
      }
      
      .menu-subtitle {
        font-size: 24rpx;
        color: #999;
        margin-top: 6rpx;
      }
    }
    
    .menu-arrow {
      display: flex;
      align-items: center;
    }
  }
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.form-input, .form-picker, .form-textarea {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #f8f8f8;
}

.form-textarea {
  height: 160rpx;
  padding: 20rpx;
}

.picker-value {
  height: 80rpx;
  line-height: 80rpx;
}

.btn-save {
  background-color: #007AFF;
  color: #ffffff;
  margin-top: 40rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 45rpx;
}
</style> 